﻿<MCard MaxWidth="400" Class="mx-auto">
    <MSystemBar></MSystemBar>

    <MRow Class="px-6 py-3" Align="AlignTypes.Center">
        <span class="mr-4">To</span>
        <MMenu @bind-Value="menu" Bottom Right Transition="scale-transition" Origin="top left">
            <ActivatorContent>
                <MChip Pill @attributes="@context.Attrs">
                    <MAvatar Left>
                        <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/jack.png"></MImage>
                    </MAvatar>
                    MASA
                </MChip>
            </ActivatorContent>
            <ChildContent>
                <MCard Width="300">
                    <MList Dark>
                        <MListItem Dark> @*TODO:Dark没有从MList继承*@
                            <MListItemAvatar>
                                <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/jack.png"></MImage>
                            </MListItemAvatar>
                            <MListItemContent>
                                <MListItemTitle>MASA</MListItemTitle>
                                <MListItemSubtitle>wangzengxing@masastack.com</MListItemSubtitle>
                            </MListItemContent>
                            <MListItemAction>
                                <MButton Icon OnClick="() => menu = false" Dark> @*TODO:Dark没有从MList继承*@
                                    <MIcon>mdi-close-circle</MIcon>
                                </MButton>
                            </MListItemAction>
                        </MListItem>
                    </MList>
                    <MList>
                        <MListItem OnClick="() => { }">
                            <MListItemAction>
                                <MIcon>mdi-briefcase</MIcon>
                            </MListItemAction>
                            <MListItemSubtitle>john@gmail.com</MListItemSubtitle>
                        </MListItem>
                    </MList>
                </MCard>
            </ChildContent>
        </MMenu>
    </MRow>

    <MDivider></MDivider>

    <MTextField FullWidth Value="@("Re: Vacation Request")" Label="Subject" SingleLine></MTextField>

    <MTextarea FullWidth SingleLine Label="Message"></MTextarea>
</MCard>

@code
{
    bool menu = false;
}